<template>
  <div class="home">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="搜索你想听的歌曲"
        @click="onSearch"
        @cancel="onCancel"
      />
    </form>
    <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
      <van-swipe-item v-for="item in list" :key="item.id"
        ><img :src="item.picUrl | dalImg" :alt="item.name" @click="tip"
      /></van-swipe-item>
    </van-swipe>
    <album></album>
  </div>
</template>

<script>
import { Toast } from "vant";
import album from "./new-album.vue";
export default {
  name: "Home",
  components: {
    album,
  },
  data() {
    return {
      value: "",
      list: [],
    };
  },
  created() {
    fetch("http://localhost:3000/album/newest")
      .then((res) => res.json())
      .then((res) => {
        this.list = res.albums;
      });
    fetch("");
  },
  methods: {
    onSearch() {
      //点击的时候跳转到另一个搜索页面
      this.$router.push({
        name: "Search",
      });
    },
    onCancel() {
      Toast("取消");
    },
    tip() {
      this.$router.push({
        name: "bSearch",
      });
    },
  },
};
</script>
<style>
.box {
  width: 100%;
  height: 200px;
}
.my-swipe img {
  width: 100%;
  height: 180px;
}
.shoolist {
  margin-bottom: 50px;
}
.van-search__content {
  border-radius: 35px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  /* line-height: 150px; */
  text-align: center;
  /* background-color: #39a9ed; */
}
.van-swipe {
  margin-top: 15px;
  border-radius: 18px;
  /* padding: 0 30px; */
}
</style>
